<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>水果忍者！</title>
	</head>
	<style>
		body{
			background-color: #484848;
			width: 100%;
			height: 800px;
			
		}
		.bgc{
			position: relative;
			top: 100px;
			width:640px;
			height: 480px;
			margin: auto;
			background-image:url(img/background.jpg);
		}
		.logo{
			width: 640px;
			height: 183px;
			position: relative;
			background-image: url(img/home-mask.png);
			animation:luoxia 2s ;
		}
		@keyframes luoxia{
			/*from{top: -50px;}
			to{top:0px;}*/
			0%{
				top: -50px;
			}
			15%{
				top: 10px;
			}
			50%{
				top: -30px;
				
			}
			100%{
				top: 0px;
			}
		}
		.logo_1{
			width: 161px;
			height: 91px;
			position: relative;
			background-image: url(img/home-desc.png);
			margin-top: -50px;
		}
		.fruit_1{
			width: 175px;
			height: 175px;
			background-image: url(img/dojo.png);
			animation: xuanzhuan 10s infinite;
			margin-left: 30px;
		}
		.fruit_1_1{
			width: 62px;
			height: 59px;
			background-image:url(img/fruit/peach.png);
			animation: xuan 9s infinite;
			margin-left: 30px;
			position: relative;
			margin: auto;
			top: 55px;
			
		}
		@keyframes xuanzhuan {
			0%{
				transform:rotate(0deg);
				
			}
			100%{
				transform:rotate(360deg) ;
			}
			
		}
		@keyframes xuan {
			0%{
				transform:rotate(0deg);
				
			}
			100%{
				transform:rotate(-720deg) ;
			}
			
		}
		.new{
			position: absolute;
			width: 70px;
			height: 42px;
			background-image: url(img/new.png);
			animation: yidong 0.5s infinite;
			left: 140px;
			margin-top: 200px;
		}
		@keyframes yidong {
			from {
				top: 0px;
			}
			to{
				top: 5px;
			}
			
		}
		.fruit_2{
			width: 195px;
			height: 195px;
			position: relative;
			background-image:url(img/new-game.png);
			animation: xuanzhuan 10s infinite;
			margin-left: 250px;
			top: -175px;
		}
		.fruit_2_2{
			width: 98px;
			height: 85px;
			background-image:url(img/fruit/sandia.png);
			animation: xuan 9s infinite;
			margin-left: 300px;
			position: relative;
			margin: auto;
			top: 55px;	
		}
		
		.fruit_3{
			width: 141px;
			height: 141px;
			position: relative;
			background-image:url(img/quit.png);
			animation: xuan 10s infinite;
			margin-left: 465px;
			top: -280px;
		}
		.fruit_3_3{
			width: 66px;
			height: 68px;
			position: relative;
			background-image:url(img/fruit/boom.png);
			animation: xuan_1 10s infinite;
			/*margin-left: 300px;*/
			position: relative;
			margin: auto;
			top: 35px;	
		}
		@keyframes xuan_1 {
			0%{
				transform:rotate(0deg);
				
			}
			100%{
				transform:rotate(720deg) ;
			}
			
		}
		audio{
			display: none;
		}
	</style>
	<body>
		<audio controls="controls" autoplay="autoplay">
			<source src="sound/menu.mp3"></source>
			<source src="sound/menu.ogg"></source>
		</audio>
		<div class="bgc">
			<div class="logo">
				<img src="img/logo.png" style="float: left;" />
				<img src="img/ninja.png" style="float: left;margin-left: 20px;margin-top: 50px;" />
			</div>
			<div class="logo_1"></div>
			<div class="fruit_1">
				<div class="fruit_1_1"></div>
			</div>
			<div class="new"></div>
			<a href="fruit.html">
			<div class="fruit_2">
				<div class="fruit_2_2">
					
				</div>
			</div>
			</a>
			<a href="index.html">
			<div class="fruit_3">
				<div class="fruit_3_3"></div>
			</div>
			</a>
		</div>
	</body>
</html>